<template>
    <div class="main-content">
        <el-tabs>
            <el-tab-pane label="工地留影">
                <div class="clap-at-will">
                    <div class="real-name">
                        <el-form
                        :inline="true"
                        ref="formInline"
                        :model="formInline"
                        label-width="100px">
                            <el-form-item label="员工姓名" prop="user">
                                <el-input v-model="formInline.user" placeholder="请输入员工姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="类型" prop="type">
                                <el-select v-model="formInline.type" placeholder="请选择类型">
                                    <el-option label="全部" :value="''"></el-option>
                                    <el-option :label="item.name" :value="item.value" v-for="item in typeList" :key="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <div class="set-btns">
                                <el-button @click="requestInfo(1)" :disabled="isLoading" type="primary">查询</el-button
                                ><el-button @click="resetForm">重置</el-button>
                            </div>
                        </el-form>
                    </div>
                    <!-- <div class="set-btns-right">
                        <el-button icon="el-icon-top-right" v-if="is_superuser || permission_map['21a']" type="primary">导出</el-button>
                    </div> -->
                    <el-table
                    v-loading="isLoading"
                    :data="tableData"
                    border
                    style="width: 100%">
                        <el-table-column
                            label="序号"
                            width="80">
                            <template slot-scope="scope">{{scope.$index+1}}</template>
                        </el-table-column>
                        <el-table-column
                            prop="committer_name"
                            label="上传人员"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            sortable
                            prop="create_time"
                            label="上传时间"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            label="类型"
                            width="140">
                            <template slot-scope="scope">
                                <div v-if="scope.row.file_type!=null">
                                    <div v-for="item in typeList" :key="item.file_type">
                                        <div v-if="scope.row.file_type == item.value">{{item.name}}</div>
                                    </div>
                                </div>
                                <div v-else>/</div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="content"
                            label="内容"></el-table-column>
                        <el-table-column
                            label="操作"
                            fixed="right"
                            width="140">
                            <template slot-scope="scope">
                                <el-button @click="checkBtn(scope.row, scope.$index)" type="text">查看</el-button>
                                <el-button @click="delBtn(scope.row, scope.$index)" v-if="is_superuser || permission_map['21a']" type="text">删除</el-button>
                                <el-button @click="downBtn(scope.row, scope.$index)" v-if="is_superuser || permission_map['21a']" type="text">下载</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        class="admin-page"
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40, 50]"
                        :page-size="20"
                        layout="sizes, prev, pager, next, jumper"
                        :total="count">
                    </el-pagination>
                    <el-dialog title="工地留影" :visible.sync="dialogClap" width="730px">
                        <el-form class="clap-at-will-container clap-form" id="dialogClap">
                            <div >
                                <el-form-item label="上传时间：">{{clapInfo.create_time}}</el-form-item>
                                <el-form-item label="上传人员：">{{clapInfo.committer_name}}</el-form-item>
                                <el-form-item label="内容：">{{clapInfo.content}}</el-form-item>
                                <el-form-item label="">
                                    <div class="upload-handle-imgs">
                                        <div class="handle-img" @click="showImg(clapInfo.images, $index)" v-for="(item, $index) in clapInfo.images">
                                            <img :src="$IMGURL + item.img"/>
                                        </div>
                                    </div>
                                </el-form-item>
                            </div>
                            <div class="" v-if="clapInfo.process && JSON.stringify(clapInfo.process) !== '{}'">
                                <el-form-item label="处理时间：">{{clapInfo.process.process_time}}</el-form-item>
                                <el-form-item label="处理人：">{{clapInfo.process.process_user_name}}</el-form-item>
                                <el-form-item label="处理内容：">{{clapInfo.process.content}}</el-form-item>
                                <el-form-item label="">
                                    <div class="upload-handle-imgs">
                                        <div class="handle-img" @click="showImg(clapInfo.process.images, $index)" v-for="(site, $index) in clapInfo.process.images">
                                            <img :src="$IMGURL + site.img"/>
                                        </div>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogClap = false">取消</el-button>
                        </span>
                    </el-dialog>
                    <el-carousel
                        v-if="dialogImg"
                        class="pic-preview"
                        width="100%"
                        height="100%"
                        :autoplay="false"
                        indicator-position="none"
                        :initial-index="imageIndex"
                        :loop="false">
                        <i class="el-icon-close" @click="dialogImg = false"></i>
                        <el-carousel-item v-for="item in imageList" :key="item">
                            <el-image
                            :src="$IMGURL + item.img"
                            fit="contain"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                    <el-carousel
                        v-if="dialogLocalImg"
                        class="pic-preview"
                        width="100%"
                        height="100%"
                        :autoplay="false"
                        indicator-position="none"
                        :initial-index="imageIndex"
                        :loop="false">
                        <i class="el-icon-close" @click="dialogLocalImg = false"></i>
                        <el-carousel-item v-for="item in imageList" :key="item">
                            <el-image
                            :src="item"
                            fit="contain"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </el-tab-pane>
        </el-tabs>
        <el-button icon="el-icon-plus" v-if="is_superuser || permission_map['21a']" class="add-clapatwill" type="primary" @click="addClapatWill">新增工地留影</el-button>
        <el-dialog :title="isEdit ? '修改工地留影':'新增工地留影'" :visible.sync="dialogClapAtWill" width="730px" v-loading="formLoading">
            <el-form :model="clapAtWillForm" ref="clapAtWillForm" id="dialogClapAtWill" label-width="120px">
                <el-form-item
                    required
                    label="类型"
                    prop="type"
                    :rules="{ required: true, message: '请选择类型' }"
                    >
                    <el-select v-model="clapAtWillForm.type" placeholder="请选择类型">
                        <el-option
                            v-for="item in typeList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    v-if="clapAtWillForm.type === 2"
                    required
                    label="推送公司"
                    prop="company"
                    :rules="{ required: true, message: '请选择推送公司' }"
                    >
                    <el-select v-model="clapAtWillForm.company" placeholder="请选择推送公司">
                        <el-option
                            v-for="item in companyList"
                            :key="item.name"
                            :label="item.name"
                            :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="内容"
                    required
                    prop="content"
                    :rules="{ required: true, message: '请输入内容' }">
                    <el-input
                        type="textarea"
                        :rows="4"
                        placeholder="请输入内容"
                        v-model="clapAtWillForm.content"
                        maxlength="100"
                        show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="图片" prop="imgs" required :rules="{ required: true, message: '请上传图片' }">
                    <div class="upload-handle-imgs">
                        <div class="handle-img" @click="showImgLocal(clapAtWillForm.images, $index)" v-for="(img, $index) in clapAtWillForm.images">
                            <img :src="img"/>
                            <icon @click.stop="delImg($index)" class="el-icon-close"></icon>
                        </div>
                        <el-upload
                            v-show="clapAtWillForm.imgs.length < 9"
                            action="#"
                            :show-file-list="false"
                            :limit="limitValue"
                            list-type="picture-card"
                            :multiple="true"
                            :on-change="changeClapAtWillImgs"
                            :on-exceed="overImg"
                            :before-upload="beforeAvatarUpload"
                            accept="image/png, image/gif, image/jpg, image/jpeg">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogClapAtWill = false">取消</el-button>
                <el-button type="primary" @click="clapAtWillComfirm('clapAtWillForm')">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                isLoading: false,
                formLoading: false,
                formInline: {
                    user: '',
                    type: ''
                },
                tableData: [],
                typeList: [
                    {name: '施工标杆', value: 0},
                    {name: '典型工法', value: 1},
                    {name: '隐患排查', value: 2}
                ],
                companyList: [],
                pagesize: 20,
                currentPage: 1,
                count: 0,
                dialogClap: false,
                clapInfo: '',
                clapIndex: 0,
                dialogHandle: false,
                dialogImg: false,
                imageList: [],
                imageIndex: 0,
                dialogLocalImg: false,
                permission_map: {},
                is_superuser: false,
                formLoading: false,
                dialogClapAtWill: false,
                isEdit: false,
                cascaderProps: {
                    value: 'id',
                    label: 'name',
                },
                clapAtWillForm: {
                    modelName: [],
                    name: '',
                    type: '',
                    company: '',
                    content: '',
                    imgs: [],
                    images: []
                },
                clapAtWillInfo: {}
            }
        },
        created() {
            if(localStorage.getItem('user_info')) {
                this.permission_map = JSON.parse(localStorage.getItem('user_info')).permission_map;
                this.is_superuser = JSON.parse(localStorage.getItem('user_info')).is_superuser;
            }
            this.pagesize = this.pageSize;
            this.isLoading = true;
            // 公司
            let company = this.$http.get('/api/v1/user/company/').then((res) => {
                this.companyList = res.data;
            }).catch(() => {})
            let request_info = this.requestInfo(1);
            this.$http.requestAll([company, request_info]).then(() => {
                this.isLoading = false;
            }).catch(() => {
                this.isLoading = false;
            })
        },
        watch: {
            'clapAtWillForm.modelName': function() {
                if(!this.isEdit) {
                    this.clapAtWillForm.name = '';
                    if(this.clapAtWillForm.modelName[0]) {
                        this.formLoading = true;
                        this.$http.get(`/api/v1/model/folder?model=${this.clapAtWillForm.modelName[this.clapAtWillForm.modelName.length-1]}`)
                        .then((res) => {
                            this.folderList = res.data;
                            this.formLoading = false;
                        })
                        .catch(() => {
                            this.formLoading = false;
                        })
                    }
                }
            }
        },
        methods: {
            requestInfo(val) {
                this.isLoading = true;
                this.currentPage = val;
                this.$http.get(`/api/v1/record/photo/?page=${this.currentPage}&page_size=${this.pagesize}&name=${this.formInline.user}&file_type=${this.formInline.type}`)
                .then((res)=>{
                    this.tableData = res.data;
                    this.isLoading = false;
                })
                .catch(()=>{
                    this.isLoading = false;
                })
            },
            handleCurrentChange(val) {
                this.$store.commit('timeStamp', Date.parse(new Date()));
                this.requestInfo(val);
            },
            handleSizeChange(val) {
                this.pagesize = val;
                this.$store.commit('timeStamp', Date.parse(new Date()));
                this.requestInfo(1);
            },
            // 重置
            resetForm() {
                this.$refs.formInline.resetFields();
                this.requestInfo(1);
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 10;
                if (!isLt2M) {
                    this.$message.error("上传图片大小不能超过 10MB!");
                }
                return false;
            },
            // 新增工地留影
            addClapatWill() {
                this.isEdit = false;
                this.dialogClapAtWill = true;
                this.clapAtWillForm.imgs = [];
                this.clapAtWillForm.images = [];
                this.$nextTick(() => {
                    this.$refs.clapAtWillForm.resetFields();
                    var container = this.$el.querySelector("#dialogClapAtWill");
                    this.$refs.cascader.$refs.panel.clearCheckedNodes();
                    container.scrollTop = 0;
                })
            },
            // 查看工地留影详情
            checkBtn(item, index) {
                if(item.file_type == 2) {          //隐患排查
                    this.isLoading = true;
                    this.$http.get(`/api/v1/record/photo/peril/${item.id}`)
                    .then((res)=>{
                        this.clapInfo = res.data;
                        this.clapIndex = index;
                        this.dialogClap = true;
                        this.$nextTick(() => {
                            var container = this.$el.querySelector("#dialogClap");
                            container.scrollTop = 0;
                        })
                        this.isLoading = false;
                    })
                    .catch(()=>{
                        this.isLoading = false;
                    })
                }else {             //施工标杆、典型工法
                    this.isLoading = true;
                    this.$http.get(`/api/v1/record/photo/marking/${item.id}`)
                    .then((res)=>{
                        this.clapInfo = res.data;
                        this.clapIndex = index;
                        this.dialogClap = true;
                        this.$nextTick(() => {
                            var container = this.$el.querySelector("#dialogClap");
                            container.scrollTop = 0;
                        })
                        this.isLoading = false;
                    })
                    .catch(()=>{
                        this.isLoading = false;
                    })
                }
            },
            // 删除
            delBtn(item) {
                this.$confirm('删除后此页面数据无法恢复，是否确定删除此条数据？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.isLoading = true;
                    this.$http.delete(`/api/v1/record/photo/${item.id}`)
                    .then((res) => {
                        this.isLoading = false;
                        this.$message.success('删除成功');
                        this.requestInfo(1);
                    })
                    .catch(()=>{
                        this.isLoading = false;
                    })
                }).catch(() => {});
            },
            // 下载
            downBtn(item) {
                let obj = this.typeList.find((v) => {
                    return v.value == item.file_type;
                })
                this.isLoading = true;
                this.$http.download({
                    file: item.id
                }, `${obj.name}${item.create_time}`).then(() => {
                    this.isLoading = false;
                })
                .catch(() => {
                    this.isLoading = false;
                })
            },
            showImg(list, index) {
                this.dialogImg = true;
                this.imageList = list;
                this.imageIndex = index;
            },
            showImgLocal(list, index) {
                this.dialogLocalImg = true;
                this.imageList = list;
                this.imageIndex = index;
            },
            delImg(index) {
                this.clapAtWillForm.imgs.splice(index, 1);
                this.clapAtWillForm.images.splice(index, 1);
            },
            overImg() {
                this.$message.warning('最多上传9张图片');
            },
            // 新增验收图片
            changeClapAtWillImgs(res) {
                let _that = this;
                var reader = new FileReader();
                reader.readAsDataURL(res.raw);
                reader.onloadend = function(e) {
                    _that.clapAtWillForm.imgs.push(res.raw);
                    _that.clapAtWillForm.images.push(e.target.result);
                    _that.limitValue = 9 - _that.clapAtWillForm.imgs.length;
                };
            },
            // 添加工地留影
            clapAtWillComfirm(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.formLoading = true;
                        let params = new FormData();
                        params.append('file_type', this.clapAtWillForm.type);
                        params.append('feedback_company', this.clapAtWillForm.company);
                        params.append('content', this.clapAtWillForm.content);
                        this.clapAtWillForm.imgs.forEach((v) => {
                            params.append('imgs', v);
                        })
                        this.$http.post('api/v1/record/photo/', params).then((res) => {
                            this.formLoading = false;
                            this.dialogClapAtWill = false;
                            this.$message.success('工地留影添加成功');
                            this.requestInfo(1);
                        }).catch(() => {
                            this.formLoading = false;
                        })
                    }
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    ::v-deep .el-image {
        width: 100%;
        height: 100%;
    }
    .clap-at-will {
        width: 100%;
        height: 100%;
        .clap-at-will-container {
            width: 100%;
            max-height: 500px;
            overflow: auto;
            position: relative;
            /* ::v-deep .el-form-item {
                margin-bottom: 0;
            } */
        }
        .real-name {
            ::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
                width: 180px;
            }
            ::v-deep .el-input input {
                width: 180px;
            }
        }
        .clap-form {
            ::v-deep .el-form-item {
                margin-bottom: 0;
            }
            ::v-deep .el-form-item__label {
                font-weight: bold;
            }
            &>div {
                border-top: 1px solid #e5e5e5;
            }
            &>div:first-child {
                border-top: none;
            }
        }
    }
    .upload-handle-imgs {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .handle-img {
            width: 148px;
            height: 148px;
            margin: 0px 20px 20px 0;
            position: relative;
            border: 1px solid #e5e5e5;
            border-radius: 5px;
            .el-icon-close {
                position: absolute;
                top: -10px;
                right: -10px;
                background: rgba(0, 0, 0, .7);
                border-radius: 50%;
                cursor: pointer;
                color: #fff;
                padding: 4px;
                border-radius: 50%;
            }
            &>img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                border-radius: 5px;
            }
        }
    }
    .add-clapatwill {
        position: absolute;
        top: 12px;
        right: 24px;
    }
</style>
